<script setup lang="ts">
import { userStore } from '@/stores/user'
import { ref, computed, onBeforeMount } from 'vue'
import { baseURL } from '@/utils/request';
import { getProductListApi } from '@/api/product';
const user = userStore()

const welcomeText = ref(
    () => {
        const time = new Date().getHours()
        if (time < 12) {
            return '今天又是活力满满的一天哦'
        } else if (time >= 12 && time < 19) {
            return '春困秋乏，午后来杯咖啡更精神'
        } else {
            return '天黑啦，工作也要注意身体哦'
        }
    }
)

const avatar = computed(() => {
    if (user.userinfo.avatar?.includes('blob') || user.userinfo.avatar?.includes('http')) {

        return user.userinfo.avatar
    }
    return `${baseURL}${user.userinfo.avatar}`
})

let hasRefreshed = ref(localStorage.getItem('hasRefreshed') === 'true')

let products = ref()

onBeforeMount(async () => {
    if (localStorage.getItem('hasRefreshed') === 'false') {
        location.reload()
        localStorage.setItem('hasRefreshed', 'true')
    }
    const result = await getProductListApi()
    products.value = result.data.data
    console.log(result.data.data);
})
</script>

<template>
    <div id="home" v-show="hasRefreshed">
        <el-card class="box-card" shadow="never">
            <el-row>
                <el-col :span="3">
                    <el-avatar :size="135" :src="avatar" />
                </el-col>
                <el-col :span="21">
                    <p class="welcomeText">欢迎回来，{{ user.userinfo.username + '&nbsp;&nbsp;&nbsp;' + welcomeText() }}</p>
                    <p>{{ user.userinfo.introduction }}</p>
                </el-col>
            </el-row>
        </el-card>
        <el-card class="product-card" shadow="never">
            <template #header>
                <div class="card-header">
                    <span>产品展示</span>
                </div>
            </template>
            <el-carousel :interval="3000" height="calc(100vh - 650px)" direction="vertical">
                <el-carousel-item v-for="item in products" :key="item._id">
                    <div class="title">{{ item.title }}</div>
                    <div class="productImg"
                        :style="`background: no-repeat center center url(${baseURL}${item.cover});background-size: cover; height: 100%;`">
                    </div>
                </el-carousel-item>
            </el-carousel>
        </el-card>
    </div>
</template>

<style lang='less' scoped>
#home {
    .box-card {
        padding: 20px;
        .welcomeText {
            transform: translateY(20px);
            color: #000;
            font-size: 32px;
        }

        p {
            color: #666;
            transform: translateY(50px);
        }

    }

    .product-card {
        margin-top: 50px;
    }

    .title {
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        z-index: 1;
        font-size: 65px;
        color: #fff;
        text-align: center;
    }

    .productImg {
        border-radius: 8px;
    }
}
</style>